<template>
    <div class="area-select">
        <!--省份-->
        <a-select v-model:value="province" @change="proChange" allowClear>
            <template v-for="item in provinceOptions" :key="`${item.value}`">
                <a-select-option :value="item.value">{{ item.label }}</a-select-option>
            </template>
        </a-select>
        <!--城市-->
        <a-select v-if="level>=2" v-model:value="city" @change="cityChange">
            <template v-for="item in cityOptions" :key="`${item.value}`">
                <a-select-option :value="item.value">{{ item.label }}</a-select-option>
            </template>
        </a-select>
        <!--地区-->
        <a-select v-if="level>=3" v-model:value="area" @change="areaChange">
            <template v-for="item in areaOptions" :key="`${item.value}`">
                <a-select-option :value="item.value">{{ item.label }}</a-select-option>
            </template>
        </a-select>
    </div>
</template>
<script lang="ts">
    import {defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted, onUnmounted, toRefs} from 'vue';
    import {propTypes} from "/@/utils/propTypes";
    import {useRuleFormItem} from '/@/hooks/component/useFormItem';
    import {provinceOptions, getDataByCode, getRealCode} from "../../utils/areaDataUtil";

    export default defineComponent({
        name: 'JAreaSelect',
        props: {
            value: [Array, String],
            province: [String],
            city: [String],
            area: [String],
            level: propTypes.number.def(3),
        },
        emits: ['change','update:value'],
        setup(props, {emit, refs}) {
            const emitData = ref<any[]>([]);
            //下拉框的选择值
            const pca = reactive({
                province: '',
                city: '',
                area: '',
            });
            //表单值
            const [state] = useRuleFormItem(props, 'value', 'change', emitData);
            //城市下拉框的选项
            const cityOptions = computed(() => {
                return pca.province ? getDataByCode(pca.province) : [];
            });
            //地区下拉框的选项
            const areaOptions = computed(() => {
                return pca.city ? getDataByCode(pca.city) : [];
            });
            /**
             * 监听props值
             */
            watchEffect(() => {
                props && initValue();
            });

            /**
             * 监听组件值变化
             */
            watch(pca, (newVal) => {
                if(!props.value){
                    emit("update:province",pca.province);
                    emit("update:city",pca.city);
                    emit("update:area",pca.area);
                }
            });
            /**
             * 数据初始化
             */
            function initValue() {
                if (props.value) {
                    //传参是数组的情况下的处理
                    if (Array.isArray(props.value)) {
                        pca.province = props.value[0];
                        pca.city = props.value[1] ? props.value[1] : '';
                        pca.area = props.value[2] ? props.value[2] : '';
                    } else {
                        //传参是数值
                        let valueArr = getRealCode(props.value, props.level);
                        if (valueArr) {
                            pca.province = valueArr[0];
                            pca.city = props.level >= 2 && valueArr[1] ? valueArr[1] : '';
                            pca.area = props.level >= 3 && valueArr[2] ? valueArr[2] : '';
                        }
                    }
                }else{
                    //绑定三个数据的情况
                    pca.province = props.province?props.province:'';
                    pca.city = props.city?props.city:'';
                    pca.area = props.area?props.area:'';
                }
            }

            /**
             * 省份change事件
             */
            function proChange(val) {
                pca.city = (val && getDataByCode(val)[0]?.value);
                pca.area = (pca.city && getDataByCode(pca.city)[0]?.value);
                state.value = props.level <= 1 ? val : (props.level <= 2 ? pca.city : pca.area);
                emit("update:value",unref(state));
            }

            /**
             * 城市change事件
             */
            function cityChange(val) {
                pca.area = (val && getDataByCode(val)[0]?.value);
                state.value = props.level <= 2 ? val : pca.area;
                emit("update:value",unref(state));
            }

            /**
             * 区域change事件
             */
            function areaChange(val) {
                state.value = val;
                emit("update:value",unref(state));
            }

            return {
                ...toRefs(pca),
                provinceOptions,
                cityOptions,
                areaOptions,
                proChange,
                cityChange,
                areaChange
            };
        },
    });
</script>
<style lang="less" scoped>
    .area-select {
        width: 100%;
        display: flex;

        .ant-select{
            width: 33.3%;
        }
        
        .ant-select:not(:first-child) {
            margin-left: 10px;
        }
    }
</style>
